﻿<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type">
<meta content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>手机断页面滑动</title>		
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body>

<div id="page-hd">
	<div id="loading">
		<div class="spinner">
		  <div class="spinner-container container1">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		  </div>
		  <div class="spinner-container container2">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		  </div>
		  <div class="spinner-container container3">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		  </div>
		</div>
	</div>
	<img src="images/arrow.png" alt="" class="arrow-up pt-page-moveIconUp">
	<img id="music" class="music" src="images/on.png" alt="">
	<audio autoplay loop>
		<source src="music/audio.mp3"></source>
	</audio>
</div>

<div id="page-content">
	<div class="page page-1 page-current">
		<div class="flower">
			<img class="animated pulse" src="images/1-1.png" alt="">
			<img class="animated flipInX" src="images/1-2.png" alt="">
		</div>
	</div>
	<div class="page page-2 hide">
		<img src="images/2-1.png" alt="">
	</div>
	<div class="page page-3 hide">
		<img class="love" src="images/3-1.png" alt="">
		<div class="marry">
			<img class="animated slideInUp" src="images/3-2.png" alt="">
			<img src="images/3-3.png" alt="">
		</div>
	</div>
	<div class="page page-4 hide">
		<div class="bird">
			<img src="images/5-1.png" alt="">
			<img src="images/5-2.png" alt="">
		</div>
		<img class="page4-1 animated tada" src="images/5-3.png" alt="">
		<img class="page4-2 animated bounce" src="images/5-4.png" alt="">
		<img class="page4-3 animated flash" src="images/5-5.png" alt="">
	</div>
	
</div>

<div id="page-ft"></div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/index.js"></script>


</body>
</html>
<script>
	var music = document.getElementById('music');

	music.addEventListener('click', function(ev) {
		var _target = ev.target;
		var aBtn = _target.nextElementSibling;
		/**
	   * @desc 判断音乐是否播放
	   * @param paused 暂停ture, 播放false
	   * */
		if (aBtn.paused) {
			music.src = 'images/on.png';
			aBtn.play();
		} else {
			music.src = 'images/off.png';
			aBtn.pause();
		}


	}, false);
</script>